<template>
  <div ref="home" class="home">
    <img ref="logo" alt="Vue logo" src="../assets/logo.png">
    <HelloWorld v-model="c" a="123" msg="Welcome to Your Vue.js + TypeScript App"/>
    <span @click="d">{{c}}</span>
    <div @click="add">添加原石</div>
    <div v-for="(item, index) in routerList" :key="index">
      <router-link tag="div" :to="item.path">{{ item.name }}</router-link>
    </div>
  </div>
</template>

<script lang="ts">
// import { Options, Vue } from 'vue-class-component'
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
import { ref, Ref, defineComponent, onMounted } from 'vue'

export default defineComponent({
  name: 'home',
  components: {
    HelloWorld
  },
  setup () {
    const logo = ref<HTMLDivElement | null>(null)
    const home = ref<HTMLDivElement | null>(null)
    const c = ref(2)
    function add () {
      const el = (home as Ref<HTMLDivElement>).value
      const div = document.createElement('div')
      div.textContent = '文案'
      div.classList.add('div')
      div.classList.add('position-1')
      window.requestAnimationFrame(() => {
        div.classList.add('position-2')
      })
      el.append(div)
    }
    onMounted(() => {
      // add((home as Ref<HTMLDivElement>).value)
    })
    return {
      logo,
      home,
      c: c,
      d () { c.value++ },
      add,
      routerList: [
        {
          path: '/2048',
          name: '2048'
        },
        {
          path: '/tcs',
          name: 'tcs'
        },
        {
          path: '/shuiguo',
          name: 'shuiguo'
        },
        {
          path: '/virtualizedScroll',
          name: '虚拟滚动'
        }
      ]
    }
  }
})

</script>

<style>
  .div {
    position: absolute;
    transition: all 10s;
  }
  .div.position-1 {
    top: 0;
    left: 0
  }
  .div.position-2 {
    top: 100px;
    left: 100px
  }
  .list {
  }
</style>
